<template>
  <div style="width: 100px" >
    <div class="tags-container" :style="{width: winW - cpLeftWidth + 'px', left: cpLeftWidth - 10 + 'px'}" >
      <el-button  class="tag-btn tag-left"  icon="el-icon-arrow-left" @click="tagTo('left')" title="切换到左侧标签" ></el-button>
      <div class="tags-list" >
        <router-link  :to="'/'"  class="tag-item" :class="isActive({path: '/dashboard'}) ? 'is-active' : 'is-inactive'">
          <span class="el-icon-s-home"></span>工作台
        </router-link>

        <router-link  v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" class="tag-item"
                      :class="isActive(tag) ? 'is-active' : 'is-inactive'">
          <span class="fa fa-circle tag-item-icon"></span>
          {{tag.title}}
          <i class='el-icon-close' v-if="tag.path != '/dashboard'" @click.prevent.stop="delSelectTag(tag)"></i>
        </router-link>
      </div>
      <div class="tag-right">
        <el-button class="tag-btn" icon="el-icon-arrow-right"  @click="tagTo('right')" title="切换到右侧标签"></el-button>
        <el-dropdown size="mini" class="tags-drop pull-right tags-more"   @command="handleCommand"
                     placement="bottom">
          <el-button type="primary" size="mini" style="padding: 2px">
            <i class="el-icon-s-operation" style="font-size: 20px"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="tags-drop-menu">
            <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
            <el-dropdown-item command="closeAll">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'TagsView',
  inject: ['reload'],
  props: ['isCollapse'],
  data() {
    return {
      msg: '标签页栏',
      winW: window.innerWidth,
    }
  },
  watch: {
    $route() {
      this.addViewTags()
    }
  },
  methods: {
    isActive(route) {
      return route.path == this.$route.path
    },
    addViewTags() {
      //路由改变时执行的方法
      if (!this.$route.name) {
        return
      }
      const route = this.$route

      this.$store.dispatch('addVisitedView', route)
    },
    delSelectTag(route) {
      //先提交删除数据的方法,数组删除出掉数据后，如果关闭的是当前打开的路由需要将路由改为数组最后一次push进去的路由
      this.$store.dispatch('delVisitedView', route).then((views) => {
        if (this.isActive(route)) {
          //只有在关闭当前打开的标签页才会有影响
          let lastView = views.slice(0)[0]//选取路由数组中的最后一位
          if (lastView) {
            this.$router.push(lastView)
          } else {
            this.$router.push('/')
          }
        }
      })
    },
    handleCommand(command) {
      if (command === 'closeOther') {
        let views = this.visitedViews.filter(v => {
          if (this.homeViews.includes(v.path)) {
            return false
          }

          if (this.$route.path === v.path) {
            return false
          }
          return true
        })

        this.$store.dispatch('delVisitedViews', views).then(() => {

        })
        return
      }

      if (command === 'closeAll') {
        let views = []
        views = views.concat(this.visitedViews.filter(v => !this.homeViews.includes(v.path)))
        this.$store.dispatch('delVisitedViews', views).then(() => {
          this.$router.push('/')
        })
        return
      }

      if (command == 'refresh') {
        this.reload()
      }
    },
    scrollCallback(el, distance) {
      let direction = distance > 0 ? 'down' : 'up'

      let offsetLeft = el.offsetLeft

      let allItem = el.querySelectorAll('.tag-item')

      let firstLeft = allItem[0].offsetLeft
      let lastRight = allItem[allItem.length - 1].offsetLeft + allItem[allItem.length - 1].offsetWidth
      if (direction === 'up') {
        // 鼠标往上滑 当 left 小于等于 0时 不再往前滑
        if (offsetLeft <= firstLeft) {
          el.style.left = '0px'
          return
        }
        if (Math.abs(offsetLeft) - Math.abs(distance) <= firstLeft) {
          el.style.left = '0px'
          return
        }

        el.style.left = (offsetLeft - Math.abs(distance)) + 'px'
        return
      }
      let lastWidth = allItem[allItem.length - 1].offsetWidth
      if (lastRight <= el.offsetWidth) {
        return
      }

      // lastRight > el.offsetWidth ，offsetLeft 只能 小于 lastRight - el.offsetWidth - lastWidth
      if (Math.abs(offsetLeft) <= (lastRight - el.offsetWidth - lastWidth)) {
        el.style.left = -(lastRight - el.offsetWidth - lastWidth) + 'px'
        return
      }
      el.style.left = (offsetLeft - distance) + 'px'
    },

    //左右切换标签
    tagTo(to) {
      let findIndex = this.visitedViews.findIndex(ob => ob.path == this.$route.path)
      let toPath
      if (to == 'left') {
        if (findIndex == 0)  {
          toPath = '/dashboard'
        } else if (findIndex != -1 || this.$route.path == '/dashboard') toPath = this.visitedViews[findIndex - 1].path
      } else {
        if (findIndex != -1 || this.$route.path == '/dashboard') toPath = this.visitedViews[findIndex + 1].path
      }
      this.$router.replace({ path: toPath }, () => {})
    }
  },
  computed: {
    visitedViews() {
      // store中取值
      let views = this.$store.state.tagsView.visitedviews.filter(v => {
        if (this.homeViews.includes(v.path)) {
          return false
        }
        return true
      })
      return views.reverse()
    },
    homeViews() {
      return ['/', '/dashboard']
    },
    cpLeftWidth() {
      return this.isCollapse ? 210: 70
    },
  },
  created() {
    this.addViewTags()
  },
}
</script>
<style scoped lang="scss">
@import "../styles/color.scss";
.tags-container {
  position: fixed;
  z-index: 999;
  top: 40px;
  height: 50px;
  padding: 8px 20px;
  box-sizing: border-box;
  background-color: $background-color;
  display: flex;
  justify-content: space-between;
  .tags-list {
    flex: 1;
    display: flex;
    margin: 0 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    height: 50px;
    .tag-item {
      flex:none;
      display: inline-block;
      height: 34px;
      line-height: 34px;
      margin-right: 10px;
      padding: 0 12px;
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      background-color: $primary-color !important;
      border-radius: 4px;
      border-color: #67c23a;
      transition: 1s;
      &.is-active {
        background-color: $secondary-color !important;
      }
    }
    .tag-item:hover, .tag-btn:hover{
      background-color: $secondary-color !important;
      color: $font-active;
    }
  }

  .tag-btn {
    padding: 2px;
    height: 24px;
    font-size: 18px;
    font-weight: 900;
    background-color: $secondary-color !important;
    color: #fff;
    border-color: $secondary-color;
    &:hover {
      background-color: $secondary-light-color !important;
    }

  }

  .tag-left {
    margin-top: 5px;
  }

  .tags-drop {
    width: 24px;
    height: 24px;
    background-color: #fff;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
  }

  ::v-deep .el-card__body{
    padding: 0;
  }
}

</style>
